<template>
    <div class="foodTypesContainer">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item class="van-swipe-item">
          <ul v-for="item in foodTypes" :key="item.id" class="foodTypesItem">
            <li>
              <img :src="'https://fuss10.elemecdn.com'+item.image_url" class="image">
              <p >{{item.title}}</p>
            </li>
          </ul>
      </van-swipe-item>
        <van-swipe-item class="van-swipe-item">
          <ul v-for="item in foodList" :key="item.id" class="foodTypesItem">
            <li>
              <img :src="'https://fuss10.elemecdn.com'+item.image_url" class="image">
              <p >{{item.title}}</p>
            </li>
          </ul>
        </van-swipe-item>
      </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe).use(SwipeItem)
export default {
  data () {
    return {
      foodTypes: [],
      foodList: []
    }
  },
  methods: {
    onLoad () {
      this.$api.believe.getFoodType().then(res => {
        this.foodTypes = res.data.slice(0, 8)
        this.foodList = res.data.slice(8, 16)
      })
    }
  },
  mounted () {
    this.onLoad()// 获取导航食品类型列表
  }
}
</script>

<style scoped lang="scss">
  .foodTypesContainer{
    width: 100%;
    .van-swipe{
      position: relative;
    }
      .van-swipe-item{
        display: flex;
        flex-flow: wrap;
        width: 375px;
        margin-top: 10px;
        text-align: center;
        .foodTypesItem{
          width: 25%;
          justify-content: center;
          align-items: center;
          .image{
            width: 50%;
          }
        }
      }
  }
</style>
